<template>
  <div class="divShow">
    <el-row>
      <el-col :span="24">
        <div style="padding: 30px;">
          <!-- 搜索框 -->
          <el-form :inline="true" :model="searchVendor" class="demo-form-inline" v-if="showSearch">
            <el-form-item label="供应商编码">
              <el-input v-model="searchVendor.vendorCode" placeholder="请输入供应商编码"></el-input>
            </el-form-item>
            <el-form-item label="供应商名称">
              <el-input v-model="searchVendor.vendorName" placeholder="请输入供应商名称"></el-input>
            </el-form-item>
            <el-form-item label="供应商简称">
              <el-input v-model="searchVendor.vendorNick" placeholder="请输入供应商简称"></el-input>
            </el-form-item>
            <el-form-item label="英文名称">
              <el-input v-model="searchVendor.vendorEn" placeholder="请输入供应商英文名称"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-select v-model="searchVendor.enableFlag" placeholder="是否启用">
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="checkVendor">查询</el-button>
              <el-button @click="cleanVendor">重置</el-button>
            </el-form-item>
          </el-form>


          <el-row>
            <el-col :span="22">
              <!-- 按钮 -->
              <el-button type="primary" size="small" @click="changeDialog(null)">新增</el-button>
              <el-button type="success" size="small" :disabled="!judgmentCh"
                @click="changeDialog(SelVendorId)">修改</el-button>
              <el-button type="danger" size="small" :disabled="!judgmentDe" @click="delJudg">删除</el-button>
              <el-button type="warning" size="small" @click="exportExcel">导出</el-button>
            </el-col>
            <el-col :span="2">
              <div>
                <el-tooltip content="隐藏搜索" placement="top">
                  <el-button icon="el-icon-search" circle @click="toggleSearch"></el-button>
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                  <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <!-- 表格 -->
          <el-table :data="VendorTable" ref="VendorTable" style="width: 100%;"
            @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="vendorId" label="客户ID" v-if="false">
            </el-table-column>
            <el-table-column prop="vendorCode" label="供应商编码">
            </el-table-column>
            <el-table-column prop="vendorName" label="供应商名称">
            </el-table-column>
            <el-table-column prop="vendorNick" label="供应商简称">
            </el-table-column>
            <el-table-column prop="vendorLevel" label="供应商等级">
            </el-table-column>
            <el-table-column prop="vendorScore" label="供应商评分">
            </el-table-column>
            <el-table-column prop="tel" label="供应商电话">
            </el-table-column>
            <el-table-column prop="enableFlag" label="是否启用">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.enableFlag === 'Y'">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-col :span="12">
                  <el-link type="primary" @click="changeDialog(scope.row.vendorId)">修改</el-link>
                </el-col>
                <el-col :span="12">
                  <el-link type="primary" @click="delDialog(scope.row.vendorId)">删除</el-link>
                </el-col>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页模块 -->
          <el-pagination :page-size="searchVendor.pageSize" :total="searchVendor.total"
            @current-change="searchVendorChange" layout="prev, pager, next">
          </el-pagination>

          <!-- dialog -->
          <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%" class="rounded-dialog"
            :close-on-click-modal="false" @close="closeVendorDialog">
            <el-form :model="AddVendor" ref="vendorForm" :rules="rules" style="padding-left:50px;">

              <el-row>
                <el-col :span="12">
                  <el-form-item label="供应商编码" prop="vendorCode">
                    <el-input v-model="AddVendor.vendorCode" autocomplete="off" style="width: 180px;"
                      placeholder="请输入供应商编码"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="供应商名称" prop="vendorName">
                    <el-input v-model="AddVendor.vendorName" autocomplete="off" style="width: 180px;"
                      placeholder="请输入供应商名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="供应商英文名称" prop="vendorEn">
                      <el-input v-model="AddVendor.vendorEn" autocomplete="off" style="width: 150px;"
                        placeholder="请输入供应商英文名称"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="供应商简称" prop="vendorNick">
                      <el-input v-model="AddVendor.vendorNick" autocomplete="off" style="width: 180px;"
                        placeholder="请输入供应商简称"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="供应商简介" prop="vendorDes">
                      <el-input v-model="AddVendor.vendorDes" type="textarea" :rows="2" autocomplete="off"
                        style="width: 620px;" placeholder="请输入内容"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-dark">
                    <el-form-item label="供应商地址" prop="address">
                      <el-input v-model="AddVendor.address" type="textarea" :rows="2" autocomplete="off"
                        style="width: 620px;" placeholder="请输入内容"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="12">
                  <el-form-item label="供应商等级" prop="vendorLevel">
                    <el-select v-model="AddVendor.vendorLevel" placeholder="请选择活动区域">
                      <el-option label="优质供应商" value="优质供应商"></el-option>
                      <el-option label="正常" value="正常"></el-option>
                      <el-option label="重点关注" value="重点关注"></el-option>
                      <el-option label="劣质供应商" value="劣质供应商"></el-option>
                      <el-option label="黑名单" value="黑名单"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="供应商评分" prop="vendorScore">
                    <el-input-number v-model="AddVendor.vendorScore" :min="1" :max="10"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="供应商官网" prop="website">
                      <el-input v-model="AddVendor.website" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="供应商邮箱地址" prop="email">
                      <el-input v-model="AddVendor.email" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="供应商电话" prop="tel">
                      <el-input v-model="AddVendor.tel" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="联系人1" prop="contact1">
                      <el-input v-model="AddVendor.contact1" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="联系人1-电话" prop="contact1Tel">
                      <el-input v-model="AddVendor.contact1Tel" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="联系人1-邮箱" prop="contact1Email">
                      <el-input v-model="AddVendor.contact1Email" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="联系人2" prop="contact2">
                      <el-input v-model="AddVendor.contact2" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="联系人2-电话" prop="contact2Tel">
                      <el-input v-model="AddVendor.contact2Tel" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="联系人2-邮箱" prop="contact2Email">
                      <el-input v-model="AddVendor.contact2Email" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form-item label="社会信用代码" prop="creditCode">
                      <el-input v-model="AddVendor.creditCode" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="是否启用" prop="enableFlag">
                      <el-radio v-model="AddVendor.enableFlag" label="Y">是</el-radio>
                      <el-radio v-model="AddVendor.enableFlag" label="N">否</el-radio>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <el-form-item label="供应商LOGO地址" prop="vendorLogo">
                      <el-input v-model="AddVendor.vendorLogo" autocomplete="off" style="width: 144px;"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <el-row style="padding-top: 20px;">
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="AddVendor.remark" type="textarea" :rows="2" autocomplete="off"
                      style="width: 640px;" placeholder="请输入备注"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closeVendorDialog">取 消</el-button>
              <el-button type="primary" @click="submitForm('vendorForm')">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import axios from 'axios';
import qs from 'qs';
import * as XLSX from 'xlsx'; // 使用命名导入
import FileSaver from 'file-saver';
import excelExport from '../../utils/excel-export';
export default {
  data() {
    return {
      // 设置dialog默认不显示
      dialogFormVisible: false,
      //根据是否有id输入判断标题
      dialogTitle: '',
      // 分页查询数据
      searchVendor: {
        vendorCode: '',
        vendorName: '',
        vendorNick: '',
        vendorEn: '',
        enableFlag: '',
        pageSize: 5,
        pageNo: 1,
        total: 0,
      },
      // 查询显示表格
      VendorTable: [],
      //新增AddVendor或者修改AddVendor
      AddVendor: {
        vendorId: '',
        vendorCode: '',
        vendorName: '',
        vendorNick: '',
        vendorEn: '',
        vendorDes: '',
        vendorLogo: '',
        vendorLevel: '',
        vendorScore: '',
        address: '',
        website: '',
        email: '',
        contact1: '',
        contact1Tel: '',
        contact1Email: '',
        contact2: '',
        contact2Tel: '',
        contact2Email: '',
        tel: '',
        creditCode: '',
        remark: '',
        enableFlag: '',
      },
      selectedRows: [],
      judgmentCh: false,
      judgmentDe: false,
      //当前选中行的vendorId的数组
      arrayVendorId: [],
      // 获取当前选中行的vendorId
      SelVendorId: '',
      showSearch: true, // 控制搜索框的显示和隐藏
      columns: [
        'vendorCode',
        'vendorName',
        'vendorNick”',
        'vendorLevel',
        'tel',
        'vendorscore"',
        'remark',
      ],
      rules: {
        vendorCode: [
          { required: true, message: '请输入供应商编码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        vendorName: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        enableFlag: [
          { required: true, message: '请选择是否启用', trigger: 'change' }
        ]
      }
    }
  },

  mounted() {
    this.checkListVendor();
  },
  methods: {
    // 导出为excel文件
    exportExcel() {
      excelExport(this.$refs.VendorTable.columns, this.VendorTable, this.formatJson, "供应商信息.xlsx");
    },
    formatJson(columns, jsonData) {
      // 防御性编程，确保 jsonData 是数组
      if (!Array.isArray(jsonData)) {
        return [];
      }

      return jsonData.map(row => columns.map(col => {
        const value = row[col.prop];
        if (['enableFlag'].includes(col.prop)) {
          return value === 'Y' ? '是' : '否';
        } else {
          return value;
        }
      }));
    },
    //刷新按钮
    refresh() {
      location.reload();
    },
    //是否显示搜索框
    toggleSearch() {
      // 切换搜索框的显示和隐藏
      this.showSearch = !this.showSearch;
    },
    //删除判断
    delJudg() {
      if (this.selectedRows.length === 1) {
        //删除单个id
        console.log(this.SelVendorId);
        this.delDialog(this.SelVendorId)
      } else {
        //删除多个id
        console.log(this.arrayVendorId);
        this.$confirm("确定要删除" + this.arrayVendorId + " 这" + this.arrayVendorId.length + "条数据吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delVendorIdArray(this.arrayVendorId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    //获取当前选中表格行的状态
    handleSelectionChange(selection) {
      this.selectedRows = selection;

      this.arrayVendorId = selection.map(row => row.vendorId);
      
      if (selection.length === 1) {
        //获取单个id
        this.SelVendorId = this.selectedRows[0].vendorId
        console.log(this.SelVendorId);

        this.judgmentDe = true;
        this.judgmentCh = true;
      } else if (selection.length > 1) {
        //获取一组id
        let rowsLength = this.selectedRows.length
        for (let index = 0; index < rowsLength; index++) {
          this.arrayVendorId[index] = this.selectedRows[index].vendorId;
        }
        this.judgmentCh = false;
        this.judgmentDe = true;
      } else {
        this.judgmentCh = false;
        this.judgmentDe = false;
      }
    },
    //根据传递进来的MdItemId数组来进行批量删除
    delVendorIdArray(arrayVendorId) {
      this.$axios.delete("http://localhost:9970/emsSystem/api/vendor/delVendorIdArray", { data: arrayVendorId }).then((res) => {
        if (res.data.code === 200) {
          //删除成功
          this.$message.success("删除成功");
          this.checkListVendor();
        }
      })
    },
    //根据id删除指定数据
    delDialog(vendorId) {
      this.$confirm("确定要删除该编号为 " + vendorId + " 的信息, 是否继续?", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("http://localhost:9970/emsSystem/api/vendor/delVendor/" + vendorId).then((res) => {
          if (res.data.code === 200) {
            //删除成功
            this.$message.success("删除成功");
            this.checkListVendor();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //关闭dialog并且清空里面的数据
    closeVendorDialog() {
      this.$refs.vendorForm.resetFields();
      this.AddVendor.vendorId = "",
        this.dialogFormVisible = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
          this.AddOrChVendor();
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    //添加或者修改Vendor
    AddOrChVendor() {
      let qsVendor = qs.stringify(this.AddVendor);
      this.$axios.post("http://localhost:9970/emsSystem/api/vendor/AddOrChVendor", qsVendor).then((res) => {
        if (res.data.code === 200) {
          //修改成功
          this.$message.success("修改或新增成功");
          this.dialogFormVisible = false;
          this.checkListVendor();
        }
      })
    },
    //改变dialog显示状态
    changeDialog(id) {
      this.dialogFormVisible = true
      if (id == null) {
        this.dialogTitle = "新增供应商"
      } else {
        this.dialogTitle = "修改供应商"
        this.AddVendor.vendorId = id
        this.checkVendorById(id);
      }

    },
    //根据vendorId查询数据
    checkVendorById(vendorId) {
      this.$axios.post("http://localhost:9970/emsSystem/api/vendor/checkVendorById/" + vendorId).then((res) => {
        if (res.data.code === 200) {
          this.AddVendor = res.data.data
        }
      })
    },
    // 改变页码
    searchVendorChange(value) {
      this.searchVendor.pageNo = value;
      this.checkListVendor();
    },
    // 进行条件搜索
    checkVendor() {
      this.checkListVendor();
    },
    // 清空搜索框
    cleanVendor() {
      this.searchVendor.vendorCode = ""
      this.searchVendor.vendorEn = ""
      this.searchVendor.enableFlag = ""
      this.searchVendor.vendorName = ""
      this.searchVendor.vendorNick = ""
    },
    // 查询MdItem数据方法
    checkListVendor() {

      let qsStr = qs.stringify(this.searchVendor);

      this.$axios.post("http://localhost:9970/emsSystem/api/vendor/checkListVendor", qsStr).then((res) => {
        if (res.data.code === 200) {
          this.VendorTable = res.data.data.records
          this.searchVendor.pageNo = res.data.data.current
          this.searchVendor.pageSize = res.data.data.size
          this.searchVendor.total = res.data.data.total
        }
      })
    }
  }
}

</script>
<style>
.divShow {
  background-color: white;
  border-radius: 10px;
}

.rounded-dialog .el-dialog {
  border-radius: 10px;
  /* 设置圆角 */
}
</style>
